import React, { useRef, useState } from "react";

import { ProTable } from "@ant-design/pro-components";
import style from "./accountdetails.module.scss";
import moment from "moment";
import { useTranslation, Trans } from "react-i18next"; // 引入react-i18next
import { Button } from "antd";

export default function AccountiDetails() {
  const { t, i18n } = useTranslation(); // 结构拿出方法
  const [showFlag, setShowFlag] = useState(false);
  const actionRef = useRef();
  const buttonRef = useRef();

  console.log("buttonRef11111", buttonRef);
  const refData = localStorage.getItem("i18nextLng");
  const columns = [
    {
      // title: "户名",
      title: () => <>{t("form.accountTitle")}</>,
      dataIndex: "accountName",
      key: "accountName",
      align: "center",
      hideInSearch: true,
      render: (text) => <a>{text}</a>,
    },
    {
      // title: "币种",
      title: () => <>{t("form.currency")}</>,
      dataIndex: "currency",
      key: "currency",
      align: "center",
      hideInSearch: true,
    },
    {
      // title: "金额",
      title: () => <>{t("form.AmountMoney")}</>,
      dataIndex: "money",
      key: "money",
      align: "center",
      hideInSearch: true,
    },
    {
      // title: "系统流水号",
      title: () => <>{t("form.Systemserialnumber")}</>,
      key: " serialNumber",
      dataIndex: "serialNumber",
      align: "center",
    },
    {
      // title: "交易类型",
      title: () => <>{t("form.TransactionType")}</>,
      key: " transaction",
      dataIndex: "transaction",
      align: "center",
      hideInSearch: true,
    },
    {
      // title: "记账时间",
      title: () => <>{t("form.Bookkeepingtime")}</>,
      key: "billingTime",
      dataIndex: "billingTime",
      align: "center",
      valueType: "dateRange",
      search: {
        transform: (value) => {
          return {
            startTime: value[0],
            endTime: value[1],
          };
        },
      },
    },
    {
      // title: "账号",
      title: () => <>{t("form.AccountNo")}</>,
      key: " account",
      dataIndex: "serialNumber",
      align: "center",
    },
    {
      // title: "备注",
      title: () => <>{t("form.Remarks")}</>,
      key: " remarks",
      dataIndex: "remarks",
      align: "center",
      hideInSearch: true,
    },
  ];

  return (
    <div className={style.AccountiDetailboss}>
      <ProTable
        columns={columns}
        actionRef={actionRef}
        ref={buttonRef}
        cardBordered
        form={{ labelWrap: true }}
        search={{
          labelWidth: 90,
          // span: 12,
          optionRender: ({ searchText, resetText }, { form }, dom) => [
            <Button
              key="searchText"
              type="primary"
              onClick={() => {
                form?.submit();
              }}
            >
              {t("buttons.query")}
            </Button>,
            <Button
              key="resetText"
              onClick={() => {
                form?.resetFields();
              }}
            >
              {t("buttons.Reset")}
            </Button>,
          ],
          collapseRender: (collapsed, showCollapseButton) => {
            return collapsed ? (
              <Button
                type="link"
                key="resetText"
                onClick={() => {
                  console.log(
                    "collapsed, showCollapseButton",
                    collapsed,
                    showCollapseButton
                  );
                  setShowFlag(collapsed);
                }}
              >
                {/* 展开 */}
                {t("buttons.Open")}
              </Button>
            ) : (
              <Button
                type="link"
                key="resetText"
                onClick={() => {
                  console.log(
                    "collapsed, showCollapseButton",
                    collapsed,
                    showCollapseButton
                  );
                  setShowFlag(collapsed);
                }}
              >
                {/* 关闭 */}
                {t("buttons.Close")}
              </Button>
            );
          },
        }}
        // search={{
        //   labelWidth: 90,
        //   searchText: refData == "en" ? "Query" : "查询",
        //   resetText: refData == "en" ? "Reset" : "重置",
        //   // defaultCollapsed: false,
        //   // collapseRender: false,
        // }}
        request={async (params = {}, sort, filter) => {
          console.log("params", params, "sort", sort, "filter", filter);

          const data = [
            {
              accountName: "1",
              currency: "John Brown",
              money: 32,
              serialNumber: "New York No. 1 Lake Park",
              transaction: "wdw",
              remarks: "1dqwd",
            },
            {
              accountName: "1",
              currency: "John Brown",
              money: 32,
              serialNumber: "New York No. 1 Lake Park",
              transaction: "wdw",
              remarks: "1dqwd",
            },
            {
              accountName: "1",
              currency: "John Brown",
              money: 32,
              serialNumber: "New York No. 1 Lake Park",
              transaction: "wdw",
              remarks: "1dqwd",
            },
            {
              accountName: "1",
              currency: "John Brown",
              money: 32,
              serialNumber: "New York No. 1 Lake Park",
              transaction: "wdw",
              remarks: "1dqwd",
            },
            {
              accountName: "1",
              currency: "John Brown",
              money: 32,
              serialNumber: "New York No. 1 Lake Park",
              transaction: "wdw",
              remarks: "1dqwd",
            },
            {
              accountName: "1",
              currency: "John Brown",
              money: 32,
              serialNumber: "New York No. 1 Lake Park",
              transaction: "wdw",
              remarks: "1dqwd",
            },
            {
              accountName: "1",
              currency: "John Brown",
              money: 32,
              serialNumber: "New York No. 1 Lake Park",
              transaction: "wdw",
              remarks: "1dqwd",
            },
            {
              accountName: "1",
              currency: "John Brown",
              money: 32,
              serialNumber: "New York No. 1 Lake Park",
              transaction: "wdw",
              remarks: "1dqwd",
            },
            {
              accountName: "1",
              currency: "John Brown",
              money: 32,
              serialNumber: "New York No. 1 Lake Park",
              transaction: "wdw",
              remarks: "1dqwd",
            },
            {
              accountName: "1",
              currency: "John Brown",
              money: 32,
              serialNumber: "New York No. 1 Lake Park",
              transaction: "wdw",
              remarks: "1dqwd",
            },
            {
              accountName: "1",
              currency: "John Brown",
              money: 32,
              serialNumber: "New York No. 1 Lake Park",
              transaction: "wdw",
              remarks: "1dqwd",
            },
            {
              accountName: "1",
              currency: "John Brown",
              money: 32,
              serialNumber: "New York No. 1 Lake Park",
              transaction: "wdw",
              remarks: "1dqwd",
            },
            {
              accountName: "1",
              currency: "John Brown",
              money: 32,
              serialNumber: "New York No. 1 Lake Park",
              transaction: "wdw",
              remarks: "1dqwd",
            },
            {
              accountName: "1",
              currency: "John Brown",
              money: 32,
              serialNumber: "New York No. 1 Lake Park",
              transaction: "wdw",
              remarks: "1dqwd",
            },
            {
              accountName: "1",
              currency: "John Brown",
              money: 32,
              serialNumber: "New York No. 1 Lake Park",
              transaction: "wdw",
              remarks: "1dqwd",
            },
            {
              accountName: "1",
              currency: "John Brown",
              money: 32,
              serialNumber: "New York No. 1 Lake Park",
              transaction: "wdw",
              remarks: "1dqwd",
            },
            {
              accountName: "1",
              currency: "John Brown",
              money: 32,
              serialNumber: "New York No. 1 Lake Park",
              transaction: "wdw",
              remarks: "1dqwd",
            },
            {
              accountName: "1",
              currency: "John Brown",
              money: 32,
              serialNumber: "New York No. 1 Lake Park",
              transaction: "wdw",
              remarks: "1dqwd",
            },
            {
              accountName: "1",
              currency: "John Brown",
              money: 32,
              serialNumber: "New York No. 1 Lake Park",
              transaction: "wdw",
              remarks: "1dqwd",
            },
            {
              accountName: "1",
              currency: "John Brown",
              money: 32,
              serialNumber: "New York No. 1 Lake Park",
              transaction: "wdw",
              remarks: "1dqwd",
            },
            {
              accountName: "1",
              currency: "John Brown",
              money: 32,
              serialNumber: "New York No. 1 Lake Park",
              transaction: "wdw",
              remarks: "1dqwd",
            },
            {
              accountName: "1",
              currency: "John Brown",
              money: 32,
              serialNumber: "New York No. 1 Lake Park",
              transaction: "wdw",
              remarks: "1dqwd",
            },
            {
              accountName: "1",
              currency: "John Brown",
              money: 32,
              serialNumber: "New York No. 1 Lake Park",
              transaction: "wdw",
              remarks: "1dqwd",
            },
            {
              accountName: "1",
              currency: "John Brown",
              money: 32,
              serialNumber: "New York No. 1 Lake Park",
              transaction: "wdw",
              remarks: "1dqwd",
            },
            {
              accountName: "1",
              currency: "John Brown",
              money: 32,
              serialNumber: "New York No. 1 Lake Park",
              transaction: "wdw",
              remarks: "1dqwd",
            },
            {
              accountName: "1",
              currency: "John Brown",
              money: 32,
              serialNumber: "New York No. 1 Lake Park",
              transaction: "wdw",
              remarks: "1dqwd",
            },
            {
              accountName: "1",
              currency: "John Brown",
              money: 32,
              serialNumber: "New York No. 1 Lake Park",
              transaction: "wdw",
              remarks: "1dqwd",
            },
            {
              accountName: "1",
              currency: "John Brown",
              money: 32,
              serialNumber: "New York No. 1 Lake Park",
              transaction: "wdw",
              remarks: "1dqwd",
            },
            {
              accountName: "1",
              currency: "John Brown",
              money: 32,
              serialNumber: "New York No. 1 Lake Park",
              transaction: "wdw",
              remarks: "1dqwd",
            },
            {
              accountName: "1",
              currency: "John Brown",
              money: 32,
              serialNumber: "New York No. 1 Lake Park",
              transaction: "wdw",
              remarks: "1dqwd",
            },
            {
              accountName: "1",
              currency: "John Brown",
              money: 32,
              serialNumber: "New York No. 1 Lake Park",
              transaction: "wdw",
              remarks: "1dqwd",
            },
            {
              accountName: "1",
              currency: "John Brown",
              money: 32,
              serialNumber: "New York No. 1 Lake Park",
              transaction: "wdw",
              remarks: "1dqwd",
            },
            {
              accountName: "1",
              currency: "John Brown",
              money: 32,
              serialNumber: "New York No. 1 Lake Park",
              transaction: "wdw",
              remarks: "1dqwd",
            },
            {
              accountName: "1",
              currency: "John Brown",
              money: 32,
              serialNumber: "New York No. 1 Lake Park",
              transaction: "wdw",
              remarks: "1dqwd",
            },
          ];

          return {
            data: data,
          };
        }}
        rowKey="id"
        options={false}
        pagination={{
          pageSize: 8,
          onChange: (page) => console.log(page),
        }}
        defaultSize="middle"
      />
    </div>
  );
}
